<template>
    <div class="project-box">
        <div class="project-item" v-for="item in projectList" :key="item.sid">
            <div class="project-top flexbox flexcenter flexbetween">
                <div class="project-title flexbox flexcenter">
                    <div class="pj-brand">{{item.brand_name}}</div>
                    {{item.product_name}}
                    <div class="pj-line"></div>
                    {{filters.chanelName2(item.channel)}}
                    <div class="pj-line"></div>
                    {{filters.sceneFilter(item.business_scene)}}
                    <div class="pj-line"></div>
                    PM：{{item.pm_name}}
                </div>
                <div class="flexbox flexcenter">
                    <div class="project-rank flexbox flexcenter">
                        <el-popover placement="top" open-delay="500" class="flex" title="" width="" trigger="hover" content="项目总产能" popper-class="project-popper">
                            <div class="blue-text" slot="reference">{{item.project_capacity}}</div>
                        </el-popover>
                        <div class="pj-line"></div>
                        <el-popover placement="top" open-delay="500" class="flex" title="" width="" trigger="hover" content="项目评级" popper-class="project-popper">
                            <div class="red-text" slot="reference">{{ item.level | filterLeve}}</div>
                        </el-popover>
                    </div>
                    <Progress :progress="getProgress(item.sync_sum,item.project_capacity)" />
                </div>
            </div>
            <div class="project-fot flexbox flexcenter">
                <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.free_users_list.length>0">
                            <div class="popper-title">自由本</div>
                            <div class="member-popper flexbox flexcenter flexbetween" v-for="(fitem,index) in item.free_users_list" :key="index">
                                <div>{{fitem.name}}</div>
                                <div>{{fitem.quantity}}</div>
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="pj-count flexbox flexcolumn flexcenter flexjust mg-r" slot="reference">
                        <div class="pj-c-num">{{item.free_num}}</div>
                        <div class="pj-c-text">自由本</div>
                    </div>
                </el-popover>
                <!-- <NamePopover :title="'自由本'" :list="item.free_users_list">
                    <div class="pj-count flexbox flexcolumn flexcenter flexjust mg-r" slot="reference">
                        <div class="pj-c-num">{{item.free_num}}</div>
                        <div class="pj-c-text">自由本</div>
                    </div>
                </NamePopover> -->
                <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.unfinish_users_list.length>0">
                            <div class="popper-title flexbox flexcenter">
                                未完成视频
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        为什么总数小于每人数量的和？
                                        <br/>
                                        这个问题举例说明：
                                        <br/>
                                        假如现在有1条需求未完成，而该需求中，A是编导、B是剪辑，那么在未完成的列表中，<br/>
                                        会显示A有1条未完成、B也有1条未完成，因此产生了每人数量的和（如 A1+B1 > 总数1 ）
                                    </div>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:5px">
                                        <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                                        <path d="M7.4 8.8544V8.9544H7.5H8.74454H8.84454V8.8544C8.84454 8.40304 8.93037 8.06505 9.09807 7.83666L9.09814 7.83671L9.10039 7.83337C9.28308 7.56236 9.58383 7.42692 10.0437 7.42692C10.3968 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1227 8.15083 11.1227 8.49176C11.1227 8.7406 11.0343 8.98223 10.8511 9.20803L10.7251 9.3559C10.3714 9.67381 10.0866 9.94944 9.87171 10.1838C9.65777 10.4171 9.50782 10.6151 9.43008 10.7769C9.26797 11.0923 9.20131 11.4719 9.20131 11.8984V12.0522V12.1522H9.30131H10.5568H10.6568V12.0522V11.8984C10.6568 11.6496 10.708 11.4341 10.8101 11.2286C10.9023 11.043 11.0356 10.8671 11.2215 10.7112L11.2215 10.7113L11.2233 10.7097C11.746 10.2493 12.0676 9.9484 12.1706 9.83314L12.1709 9.8334L12.1763 9.82623C12.4532 9.4545 12.6 8.98201 12.6 8.41484C12.6 7.72088 12.3729 7.16437 11.9116 6.75784C11.452 6.34177 10.8473 6.15 10.1201 6.15C9.29233 6.15 8.63194 6.38707 8.13991 6.8706C7.63532 7.35566 7.4 8.02186 7.4 8.8544ZM10.584 13.1633L10.5841 13.1632L10.5816 13.1609C10.3975 12.9879 10.1648 12.903 9.90175 12.903C9.63738 12.903 9.41603 12.9888 9.23284 13.1609C9.04613 13.3363 8.96114 13.5619 8.96114 13.8271C8.96114 14.0924 9.04613 14.318 9.23284 14.4934C9.41353 14.6632 9.634 14.7623 9.90175 14.7623C10.1661 14.7623 10.3875 14.6765 10.5707 14.5044C10.756 14.3303 10.8533 14.0945 10.8533 13.8271C10.8533 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="member-popper flexbox flexcenter flexbetween" v-for="(unitem,index) in item.unfinish_users_list" :key="index">
                                <div>{{unitem.name}}</div>
                                <div>{{unitem.quantity}}</div>
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="pj-count flexbox flexcolumn flexcenter flexjust mg-r" slot="reference">
                        <div class="pj-c-num">{{item.unfinish_num}}</div>
                        <div class="pj-c-text">未完成</div>
                    </div>
                </el-popover>
                <el-popover placement="bottom" open-delay="500" title="" width="280" trigger="hover" popper-class="project-popper">
                    <div class="popper-content">
                        <template v-if="item.undrop_list.length>0">
                            <div class="popper-title">未投放视频</div>
                            <div class="popper-type2" v-for="(dritem,index) in item.undrop_list" :key="index">
                                {{dritem}}
                            </div>
                        </template>
                        <div class="null-text" v-else>无</div>
                    </div>
                    <div class="pj-count flexbox flexcolumn flexcenter flexjust mg-r" slot="reference">
                        <div class="pj-c-num">{{item.undrop_num}}</div>
                        <div class="pj-c-text">未投放</div>
                    </div>
                </el-popover>
                <div class="edit-box">
                    <div class="edit-item flexbox flexcenter">
                        <div class="edit-count mg-r">剪辑一组 · {{item.material_users_list.eiditor_group1_num}}</div>
                        <template v-if="item.material_users_list.eiditor_group1.length>0">
                            <template  v-for="(editem1,index) in item.material_users_list.eiditor_group1">
                                <template v-if="getLength(item.material_users_list.eiditor_group1.length)">
                                    <div class="edit-member mg-r flexbox flexcenter flexbetween" v-if="index<6" :key="index">
                                        <div>{{editem1.name}}</div>
                                        <div>·</div>
                                        <div>{{editem1.quantity}}</div>
                                    </div>
                                </template>
                                <div class="edit-member mg-r flexbox flexcenter flexbetween" :key="index" v-else>
                                    <div>{{editem1.name}}</div>
                                    <div>·</div>
                                    <div>{{editem1.quantity}}</div>
                                </div>
                            </template>
                        </template>
                        <div class="edit-member mg-r flexbox flexcenter flexbetween" v-else>
                            暂无人员
                        </div>
                        <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper" v-if="getLength(item.material_users_list.eiditor_group1.length)">
                            <div class="popper-content">
                                <div class="popper-title">剪辑一组</div>
                                <div class="member-popper flexbox flexcenter flexbetween" v-for="(editem1,index) in item.material_users_list.eiditor_group1" :key="index">
                                    <div>{{editem1.name}}</div>
                                    <div>{{editem1.quantity}}</div>
                                </div>
                            </div>
                            <div class="all-edit mg-r" slot="reference">全部</div>
                        </el-popover>
                    </div>
                    <div class="edit-item flexbox flexcenter mg-t4">
                        <div class="edit-count mg-r">剪辑二组 · {{item.material_users_list.eiditor_group2_num}}</div>
                        <template v-if="item.material_users_list.eiditor_group2.length>0">
                            <template  v-for="(editem2,index) in item.material_users_list.eiditor_group2">
                                <template v-if="getLength(item.material_users_list.eiditor_group2.length)">
                                    <div class="edit-member mg-r flexbox flexcenter flexbetween" v-if="index<6" :key="index">
                                        <div>{{editem2.name}}</div>
                                        <div>·</div>
                                        <div>{{editem2.quantity}}</div>
                                    </div>
                                </template>
                                <div class="edit-member mg-r flexbox flexcenter flexbetween" :key="index" v-else>
                                    <div>{{editem2.name}}</div>
                                    <div>·</div>
                                    <div>{{editem2.quantity}}</div>
                                </div>
                            </template>
                        </template>
                        <div class="edit-member mg-r flexbox flexcenter flexbetween" v-else>
                            暂无人员
                        </div>
                        <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper" v-if="getLength(item.material_users_list.eiditor_group2.length)">
                            <div class="popper-content">
                                <div class="popper-title">剪辑二组</div>
                                <div class="member-popper flexbox flexcenter flexbetween" v-for="(editem2,index) in item.material_users_list.eiditor_group2" :key="index">
                                    <div>{{editem2.name}}</div>
                                    <div>{{editem2.quantity}}</div>
                                </div>
                            </div>
                            <div class="all-edit mg-r" slot="reference">全部</div>
                        </el-popover>
                    </div>
                     <div class="edit-item flexbox flexcenter mg-t4">
                        <div class="edit-count mg-r">剪辑三组 · {{item.material_users_list.eiditor_group3_num}}</div>
                        <template v-if="item.material_users_list.eiditor_group3.length>0">
                            <template  v-for="(editem1,index) in item.material_users_list.eiditor_group3">
                                <template v-if="getLength(item.material_users_list.eiditor_group3.length)">
                                    <div class="edit-member mg-r flexbox flexcenter flexbetween" v-if="index<6" :key="index">
                                        <div>{{editem1.name}}</div>
                                        <div>·</div>
                                        <div>{{editem1.quantity}}</div>
                                    </div>
                                </template>
                                <div class="edit-member mg-r flexbox flexcenter flexbetween" :key="index" v-else>
                                    <div>{{editem1.name}}</div>
                                    <div>·</div>
                                    <div>{{editem1.quantity}}</div>
                                </div>
                            </template>
                        </template>
                        <div class="edit-member mg-r flexbox flexcenter flexbetween" v-else>
                            暂无人员
                        </div>
                        <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper" v-if="getLength(item.material_users_list.eiditor_group3.length)">
                            <div class="popper-content">
                                <div class="popper-title">剪辑三组</div>
                                <div class="member-popper flexbox flexcenter flexbetween" v-for="(editem1,index) in item.material_users_list.eiditor_group3" :key="index">
                                    <div>{{editem1.name}}</div>
                                    <div>{{editem1.quantity}}</div>
                                </div>
                            </div>
                            <div class="all-edit mg-r" slot="reference">全部</div>
                        </el-popover>
                    </div>
                </div>
                <div class="direct-title mg-r flexbox flexcolumn flexcenter flexjust">
                    <div class="dir-num">{{item.material_users_list.centre_group_num}}</div>
                    <div class="dir-text">编导</div>
                </div>
                <!-- <template v-for="(tritem,index) in item.material_users_list.centre_group">
                    <template v-if="getDreShow(item.material_users_list.eiditor_group1.length,item.material_users_list.eiditor_group2.length,item.material_users_list.centre_group.length)">
                        <div class="direct-list mg-r" v-if="index<6" :key="index">
                            <div class="dir-data">{{tritem.quantity}}</div>
                            <div class="dir-name">{{tritem.name}}</div>
                        </div>
                    </template>
                    <div class="direct-list mg-r" v-else :key="index">
                        <div class="dir-data">{{tritem.quantity}}</div>
                        <div class="dir-name">{{tritem.name}}</div>
                    </div>
                </template> -->
                <div class="direct-list mg-r" v-for="(tritem,index) in item.material_users_list.centre_group" :key="index">
                    <div class="dir-data">{{tritem.quantity}}</div>
                    <div class="dir-name">{{tritem.name}}</div>
                </div>
                <template>
                    <el-popover placement="bottom" open-delay="500" title="" width="100" trigger="hover" popper-class="project-popper" v-if="getDreShow(item.material_users_list.eiditor_group1.length,item.material_users_list.eiditor_group2.length,item.material_users_list.centre_group.length)">
                        <div class="popper-content">
                            <div class="popper-title">编导产能</div>
                            <div class="member-popper flexbox flexcenter flexbetween" v-for="(tritem,index) in item.material_users_list.centre_group" :key="index">
                                <div>{{tritem.name}}</div>
                                <div>{{tritem.quantity}}</div>
                            </div>
                        </div>
                        <div class="all-dir flexbox flexcenter flexjust" slot="reference">查看全部</div>
                    </el-popover>
                </template>
            </div>
        </div>

        <div class="page_box flexbox flexcenter" v-if="proTotal>10">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="proData.page" :page-size="proData.limit" :page-sizes="[10, 50, 100, 200]" :total="proTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Progress from "./Progress";
// import NamePopover from './NamePopover'
export default {
    props: {
        projectList: {
            type: Array,
            default: [],
        },
        proData: {
            type: Object,
            default: {},
        },
        proTotal: {
            type: Number,
            default: 0,
        },
    },
    components: {
        Progress
    },
    filters:{
        filterLeve(e){
            let levelObj = { 0:'T0', 1:'T1', 2:'T2', 3:'T3', 4:'T4' }
            return levelObj[e]
        }
    },
    name: "",
    data() {
        return {
            screenWidth: document.documentElement.clientWidth,
        };
    },
    created() {
        var that = this;
        window.addEventListener("resize", function () {
            that.screenWidth = document.body.offsetWidth;
        });
    },
    methods: {
        getProgress(sync_sum, project_capacity) {
            let progress = (sync_sum / project_capacity * 100).toFixed(0);
            return progress;
        },

        getEditShow(edit,direct){
            let is_show = false
            if(this.screenWidth<=1440 && edit>5 && direct>6){
                is_show = true 
            }
            return is_show
        },

        getDreShow(edit1,edit2,direct){
            let is_show = false
            if((edit1>5 || edit2>5) && this.screenWidth<=1440 && direct>6){
                is_show = true 
            }
            return is_show
        },

        getLength(length){
            let is_show = false
            if(length>6){
                is_show = true
            }
            return is_show
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.proData.limit = val;
            this.$emit("getProject",1)
        },
        // 当前页切换
        handleCurrentChange(val) {
            // let mainbox =  document.querySelector('.el-main')
            // mainbox.scrollTop = 0
            this.$emit("getProject",val)
        },
    },
};
</script>


<style scoped>
.mg-r {
    margin-right: 8px;
}
.mg-t4 {
    margin-top: 4px;
}
.project-item {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    background: linear-gradient(
        180deg,
        rgba(247, 249, 255, 0.7) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    box-shadow: 0px 1px 4px 0px rgba(200, 200, 200, 0.25);
}
.project-top {
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f2f3;
}
.project-title {
    font-size: 14px;
    color: #616c85;
}
.pj-brand {
    font-size: 16px;
    color: #17233d;
    font-weight: 700;
    margin-right: 8px;
}
.pj-line {
    height: 12px;
    border-left: 1px solid #ebebeb;
    margin: 0 8px;
}
.project-rank {
    width: 73px;
    height: 28px;
    border-radius: 6px;
    background-color: rgba(165, 177, 209, 0.1);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.project-rank .pj-line {
    margin: 0;
}
.project-rank .blue-text {
    color: #165dff;
}
.project-rank .red-text {
    color: #f53f3f;
}

.project-fot {
    margin-top: 12px;
}
.pj-count {
    width: 48px;
    height: 49px;
    background-color: rgba(165, 177, 209, 0.1);
    color: #17233d;
    flex-shrink: 0;
    border-radius: 8px;
}
.pj-c-num {
    height: 19px;
    line-height: 19px;
    font-size: 14px;
}
.pj-c-text {
    font-size: 12px;
    line-height: 16px;
    height: 16px;
    margin-top: 2px;
}
.edit-box{
    flex-shrink: 0;
    width: 576px;
}
.edit-count {
    width: 100px;
    height: 23px;
    box-sizing: border-box;
    border: 1px solid #f1f2f3;
    border-radius: 6px;
    padding-left: 6px;
    line-height: 23px;
    font-size: 13px;
    color: #17233d;
    flex-shrink: 0;
}
.edit-member {
    width: 60px;
    height: 18px;
    font-size: 13px;
    color: #616c85;
    flex-shrink: 0;
}
.all-edit {
    width: 36px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #f1f2f3;
    font-size: 13px;
    color: #616c85;
}
.direct-title {
    width: 38px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #f1f2f3;
    color: #17233d;
    font-size: 13px;
    flex-shrink: 0;
}
.dir-num {
    height: 18px;
    line-height: 18px;
}
.dir-text {
    margin-top: 2px;
    height: 18px;
    line-height: 18px;
}
.direct-list {
    width: 46px;
    height: 41px;
    color: #616c85;
    flex-shrink: 0;
}
.dir-data {
    font-size: 14px;
    height: 18px;
    line-height: 18px;
}
.dir-name {
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-top: 4px;
}
.all-dir {
    width: 42px;
    height: 50px;
    padding: 6px;
    font-size: 13px;
    color: #616c85;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #f1f2f3;
    line-height: 20px;
}
.popper-content {
    max-height: 400px;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-y: auto;
}
.popper-title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    font-weight: 700;
}
.member-popper {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    margin-top: 4px;
}
.popper-type2 {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
}
.page_box {
    padding: 0;
}
.null-text{
    text-align: center;
    font-size: 14px;
    color: #616c85;
}
</style>

<style>
.project-popper {
    min-width: unset;
    padding: 12px;
}
</style>
